<template>
  <div>
    <!-- 表单，条件 -->
    <el-form inline>
      <el-form-item label="文章标题">
        <el-input
          type="text"
          placeholder="请输入文章标题"
          v-model="condition.title"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章内容">
        <el-input
          type="text"
          placeholder="请输入文章内容"
          v-model="condition.content"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章分类">
        <el-select
          v-model="condition.classifyId"
          @change="clasifyChange"
          :clearable="true"
        >
          <el-option
            v-for="(item, index) in classifyList"
            :key="index"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 查询 -->
      <el-form-item>
        <el-button type="primary" @click="getArticleList()">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="articleList" border>
      <el-table-column label="标题" prop="title" min-width="200">
      </el-table-column>
      <el-table-column label="分类" prop="clasifyName" width="120">
      </el-table-column>
      <el-table-column label="浏览数量" prop="browseCount" width="120">
      </el-table-column>
      <el-table-column label="点赞数量" prop="supportCount" width="120">
      </el-table-column>
      <el-table-column label="收藏数量" prop="collectCount" width="120">
      </el-table-column>
      <el-table-column label="分享数量" prop="shareCount" width="120">
      </el-table-column>
      <el-table-column label="封面图" prop="coverImage" width="120">
      </el-table-column>
      <el-table-column label="状态" prop="state" width="120"> </el-table-column>
      <el-table-column label="操作" fixed="right" width="180">
        <template slot-scope="scope">
          <el-button type="warning" @click="handleEdit(scope.row, scope.index)"
            >编辑</el-button
          >
          <el-button type="danger" @click="handleDelete(scope.row, scope.index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      background
      layout="total,sizes,prev, pager, next,jumper"
      :total="total"
      :current-page.sync="page.pageIndex"
      :page-size.sync="page.pageSize"
      :page-sizes="[10, 20, 40, 60]"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
    </el-pagination>
    <!-- 编辑文章弹框 -->
    <el-dialog
      title="编辑文章"
      v-if="dialogFormVisible"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="90%"
    >
      <edit-article-2 :id="articleId" v-on:close="closeDialog"></edit-article-2>
    </el-dialog>
  </div>
</template>

<script>
import { getArticlePageList } from "@/api/article/index";
import EditArticle2 from "./EditArticle2.vue";

export default {
  components: {
    EditArticle2,
  },
  data() {
    return {
      articleId: 0, //当前点击行的id，用于编辑
      dialogFormVisible: false, //默认不显示
      clasifyId: null,
      classifyList: [
        { id: 1, name: ".NET" },
        { id: 2, name: "精选" },
        { id: 3, name: "软件" },
      ],
      //   文章数据
      articleList: [
        {
          id: 1,
          title: "文章1",
          content: "文章1内容",
          clasifyName: ".NET",
          browseCount: 1,
        },
        {
          id: 2,
          title: "文章2",
          content: "文章2内容",
          clasifyName: "精选",
          browseCount: 123,
        },
        {
          id: 3,
          title: "文章3",
          content: "文章3内容",
          clasifyName: "软件",
          browseCount: 1,
        },
        {
          id: 4,
          title: "文章4",
          content: "文章4内容",
          clasifyName: ".NET",
          browseCount: 1,
        },
      ],
      page: {
        pageIndex: 1,
        pageSize: 10,
      },
      total: 0,
      condition: {
        title: "",
        content: "",
        classifyId: "",
      },
    };
  },
  created() {
    this.getArticleList();
  },
  //   方法
  methods: {
    getArticleList() {
      console.log("分页：", this.page);
      console.log("条件：", this.condition);
      // 调用API接口获取文章分页数据列表
      getArticlePageList(
        this.page.pageIndex,
        this.page.pageSize,
        this.condition
      )
        .then((res) => {
          console.log("调用文章分页数据列表返回结果：", res);
          if (res.code == -1) {
            this.$message.error("获取文章分页数据列表接口调用异常！");
            return;
          }

          this.articleList = res.data.list; //数据
          this.total = res.data.total; //总数据条数
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 关闭编辑文章的弹窗
    closeDialog() {
      this.articleId = 0;
      this.dialogFormVisible = false;
    },
    // 页码改变时触发
    currentChange(pageIndex) {
      this.page.pageIndex = pageIndex;
      console.log("当前页码：", this.page.pageIndex);
      this.getArticleList();
    },
    // 每页显示数量改变时触发
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      console.log("当前显示页数：", this.page.pageSize);
      this.getArticleList();
    },
    // 分类
    clasifyChange(value) {
      console.log("当前选中的分类值：", value);
      console.log("Data中当前选中的分类值：", this.clasifyId);
    },
    // 编辑
    handleEdit(row, index) {
      console.log("当前点击编辑的行数据：", row);
      this.articleId = row.id;
      this.dialogFormVisible = true;
    },
    // 删除
    handleDelete(row, index) {
      console.log("当前点击删除的行数据：", row);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
